<template>
    <div class="hotel">
        <!-- 未审核单量 -->
        <div class="unaudited">超过2天未审核单量：{{ overTwoDays }}</div>
        <!-- 图表部分 -->
        <div class="chart">
            <!-- 左边饼图 -->
            <div class="chart_left">
                <div class="chart_left_top">
                    <div class="date">
                        <div class="date_title">筛选时间</div>
                        <div class="date_picker">
                            <el-date-picker
                                style="width: 100%; box-shadow: none; background-color: transparent"
                                v-model="pieDate"
                                type="datetimerange"
                                range-separator="To"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                format="YYYY-MM-DD HH:mm:ss"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </div>
                    </div>
                    <div class="search" @click="getPieChart1()">
                        <img class="icon_img" src="@/assets/imgs/search.png" alt="" />
                        搜索
                    </div>
                    <div class="reset" @click="resetPieChart1()">
                        <img class="icon_img" src="@/assets/imgs/reset.png" alt="" />
                        重置
                    </div>
                    <div class="reset" @click="exportPieChart1()">
                        <img class="icon_img" src="@/assets/imgs/export.png" alt="" />
                        导出
                    </div>
                </div>
                <!-- 底下图表 饼图 -->
                <div class="chart1" ref="chartRef1"></div>
            </div>
            <!-- 右边柱状图 -->
            <div class="chart_right">
                <div class="chart_left_top">
                    <div class="date">
                        <div class="date_title">筛选时间</div>
                        <div class="date_picker">
                            <el-date-picker
                                style="width: 100%; box-shadow: none; background-color: transparent"
                                v-model="zhuDate"
                                type="year"
                                placeholder="请选择年份"
                            />
                        </div>
                    </div>
                    <div class="search" @click="getBarChart1()">
                        <img class="icon_img" src="@/assets/imgs/search.png" alt="" />
                        搜索
                    </div>
                    <div class="reset" @click="resetBarChart1()">
                        <img class="icon_img" src="@/assets/imgs/reset.png" alt="" />
                        重置
                    </div>
                    <div class="reset" @click="exportBarChart1()">
                        <img class="icon_img" src="@/assets/imgs/export.png" alt="" />
                        后台导出
                    </div>
                </div>
                <!-- 底下图表 柱状图 -->
                <div class="chart1" ref="chartRef2"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { debounce } from "lodash-es";
import { getUncheckCount, getPieChart, getBarChart, exportMonthlyReport } from "@/api/hotel";
import { getCurrentTime, getCurrentMonthFirst } from "@/utils/formatTime.js";
import { ElMessage } from "element-plus";

//超过两天未审核单量
const overTwoDays = ref(0);

//获取超过两天未审核单量
const getOverTwoDays = async () => {
    try {
        const res = await getUncheckCount({ type: 2 });
        overTwoDays.value = res.data;
    } catch (error) {
        console.log(error);
    }
};

//饼状图筛选时间
const pieDate = ref([]);

//第一个echarts
const chartRef1 = ref(null);
const myChart1 = ref(null);
//配置第一个echarts函数
const initChart1 = (data) => {
    // 基于准备好的dom，初始化echarts实例
    // 指定图表的配置项和数据
    const option = {
        color: ["#586cb1", "#33FF57", "#3357FF"], // 设置自定义颜色
        title: {
            text: "日报表",
            left: "center",
        },
        tooltip: {
            trigger: "item",
        },
        legend: {
            orient: "vertical",
            left: "left",
        },
        series: [
            {
                type: "pie",
                radius: "50%",
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
            },
        ],
    };

    // // 基于准备好的dom，初始化echarts实例
    myChart1.value = echarts.init(chartRef1.value).setOption(option);
};

//处理时间
const handleTime = () => {
    //处理时间 如果有时间 取选择的时间 没有时间 取当前月的第一天 到 当天
    let start_time = "";
    let end_time = "";
    if (pieDate.value.length > 0) {
        start_time = pieDate.value[0];
        end_time = pieDate.value[1];
    } else {
        start_time = getCurrentMonthFirst();
        end_time = getCurrentTime();
    }
    return { start_time, end_time };
};

//获取日报表
const getPieChart1 = async () => {
    try {
        //处理时间 如果有时间 取选择的时间 没有时间 取当前月的第一天 到 当天
        let { start_time, end_time } = handleTime();
        const res = await getPieChart({ type: 2, start_time: start_time, end_time: end_time });

        //初始化图表
        initChart1(res.data);
    } catch (error) {
        console.log(error);
    }
};

//重置日报表搜索条件
const resetPieChart1 = () => {
    pieDate.value = [];
    getPieChart1();
};

//导出日报表
const exportPieChart1 = async () => {
    try {
        //处理时间 如果有时间 取选择的时间 没有时间 取当前月的第一天 到 当天
        let { start_time, end_time } = handleTime();
        //创建一个a链接
        let a = document.createElement("a");
        //设置a链接的href
        a.href = `${import.meta.env.VITE_BASE_URL}${
            import.meta.env.VITE_API_BASEPATH
        }export?start_time=${start_time}&end_time=${end_time}&type=2`;
        //点击a链接
        a.click();
    } catch (error) {
        console.log(error);
    }
};

//柱状图筛选时间
const zhuDate = ref("");

//第二个echarts
const chartRef2 = ref(null);
const myChart2 = ref(null);

//配置第二个echarts函数
const initChart2 = (data) => {
    let count_finishList = data.map((item) => item.count_finish);
    let count_otherList = data.map((item) => item.count_other);
    let count_allList = data.map((item) => item.count_all);
    // 指定图表的配置项和数据
    const option = {
        title: {
            text: "月报表",
            left: "center",
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                crossStyle: {
                    color: "#999",
                },
            },
        },
        legend: {
            data: ["已结束流程", "其他流程", "总数"],
            left: "left",
        },
        xAxis: [
            {
                type: "category",
                data: [
                    "一月",
                    "二月",
                    "三月",
                    "四月",
                    "五月",
                    "六月",
                    "七月",
                    "八月",
                    "九月",
                    "十月",
                    "十一月",
                    "十二月",
                ],
                axisPointer: {
                    type: "shadow",
                    show: true,
                },
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "",
                min: 0,
                max: 1600,
                interval: 200,
                axisLabel: {
                    formatter: "{value} 条",
                },
            },
        ],
        series: [
            {
                name: "已结束流程",
                type: "bar",
                tooltip: {
                    valueFormatter: (value) => {
                        return value + " 条";
                    },
                },
                data: count_finishList,
            },
            {
                name: "其他流程",
                type: "bar",
                tooltip: {
                    valueFormatter: (value) => {
                        return value + " 条";
                    },
                },
                data: count_otherList,
            },
            {
                name: "总数",
                type: "line",
                yAxisIndex: 0,
                tooltip: {
                    valueFormatter: (value) => {
                        return value + " 条";
                    },
                },
                data: count_allList,
            },
        ],
    };

    // // 基于准备好的dom，初始化echarts实例
    myChart2.value = echarts.init(chartRef2.value).setOption(option);
};

//获取月报表
const getBarChart1 = async () => {
    try {
        let year = "";
        if (zhuDate.value) {
            year = zhuDate.value.getFullYear();
        } else {
            year = new Date().getFullYear(); //获取当前年份
        }
        const res = await getBarChart({ type: 2, year });
        initChart2(res.data);
    } catch (error) {
        console.log(error);
    }
};

//重置月报表搜索条件
const resetBarChart1 = () => {
    zhuDate.value = "";
    getBarChart1();
};

//导出月报表
const exportBarChart1 = async () => {
    try {
        let year = "";
        if (zhuDate.value) {
            year = zhuDate.value.getFullYear();
        } else {
            year = new Date().getFullYear(); //获取当前年份
        }
        const res = await exportMonthlyReport({ type: 2, year });
        if (res.status_code === 200) {
            ElMessage.success("导出成功");
        } else {
            ElMessage.error(res.message);
        }
    } catch (error) {
        console.log(error);
    }
};

//监听页面变化 改变图表自适应
const resizeHandler = debounce(() => {
    myChart1.value.resize();
    myChart2.value.resize();
}, 100);

onMounted(() => {
    //获取超过两天单量
    getOverTwoDays();

    //默认加载获取日报表数据
    getPieChart1();

    //默认加载获取月报表数据
    getBarChart1();

    window.addEventListener("resize", resizeHandler);
});

onUnmounted(() => {
    // 清理监听器
    window.removeEventListener("resize", resizeHandler);
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
    box-shadow: none !important;
    background-color: transparent !important;
}

.hotel {
    width: 100%;
    height: calc(100vh - 60px);
    padding: 20px;

    .unaudited {
        width: 100%;
        height: 100px;
        border: 1px solid #f3f3f3;
        font-size: 36px;
        line-height: 100px;
        text-align: center;
        margin-bottom: 20px;
        background-color: #fff;
    }

    .chart {
        width: 100%;
        height: calc(100% - 120px);
        display: flex;

        .chart_left,
        .chart_right {
            width: 50%;
            height: 100%;
        }

        .chart_left_top {
            width: 100%;
            display: flex;
            margin-bottom: 20px;
            .date {
                width: 350px;
                height: 30px;
                border: 1px solid #dcdfe6;
                display: flex;
                border-radius: 4px;
                background-color: #fff;

                .date_title {
                    min-width: 80px;
                    height: 100%;
                    border-right: 1px solid #dcdfe6;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 700;
                }
                .date_picker {
                    width: 270px;
                    height: 100%;
                }
            }
            .search,
            .reset {
                // min-width: 80px;
                height: 30px;
                border-radius: 4px;
                padding: 0 10px;
                background-color: #586cb1;
                color: #fff;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 20px;
                cursor: pointer;
            }

            .reset {
                background-color: #fff;
                color: #677279;
                box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
            }

            .icon_img {
                width: 16px;
                height: 16px;
                margin-right: 5px;
            }
        }
        .chart1 {
            width: 100%;
            height: calc(100% - 50px);
            background-color: #fff;
            padding: 10px;
        }
    }
}
</style>
